<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Measure_line_Service</title>
    <script src="../../dist/openlayers/include-openlayers.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
    <div id="map" style="width: 100%;height:100%"></div>
    <div id="stopMarker1">
        <img src="../img/marker.png" />
    </div>
    <div id="stopMarker2">
        <img src="../img/marker.png" />
    </div>
    <script type="text/javascript">
        var map, interaction, vectorLayer, feature,
            url = 'http://localhost:8090/iserver/services/map-Dubai/rest/maps/Dubai';
        var serviceUrl = "http://localhost:8090/iserver/services/transportationAnalyst-Dubai/rest/networkanalyst/BuildNetwork@are-mu";
        map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [55.23, 25.08], // 中心点
                zoom: 12, // 缩放级别
                projection: "EPSG:4326"
            }),
            controls: ol.control.defaults({
                attributionOptions: {
                    collapsed: true
                }
            }),
            layers: [
                // 创建一个使用Open Street Map地图源的瓦片图层
                new ol.layer.Tile({ source: new ol.source.OSM() })
            ],
        });
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: url,
                tileLoadFunction: function (tile, src) {
                    var xhr = new XMLHttpRequest();
                    xhr.responseType = 'blob';
                    xhr.addEventListener('loadend', function (evt) {
                        var data = this.response;
                        if (data !== undefined) {
                            tile.getImage().src = URL.createObjectURL(data);
                        } else {
                            tile.setState('error');
                        }
                    });
                    xhr.addEventListener('error', function () {
                        tile.setState('error');
                    });
                    xhr.open('GET', src);
                    xhr.setRequestHeader('Accept', '*/*');
                    xhr.setRequestHeader('X-HW-ID', "userid");
                    xhr.setRequestHeader('X-HW-APPKEY', "username");
                    xhr.send();
                }
            }),
            projection: 'EPSG:4326'
        });
        map.addLayer(layer);
        findPathProcess();


        //最短路径分析
        function findPathProcess() {
            //添加站点
            var stopMarker1 = new ol.Overlay({
                element: document.getElementById('stopMarker1'),
                positioning: 'center-center',
                position: [55.3, 25.2]
            });
            var stopMarker2 = new ol.Overlay({
                element: document.getElementById('stopMarker2'),
                positioning: 'center-center',
                position: [55.4, 25.3]
            });

            map.addOverlay(stopMarker1);
            map.addOverlay(stopMarker2);

            //创建最佳路径分析参数实例
            var resultSetting = new SuperMap.TransportationAnalystResultSetting({
                returnEdgeFeatures: true,
                returnEdgeGeometry: true,
                returnEdgeIDs: true,
                returnNodeFeatures: true,
                returnNodeGeometry: true,
                returnNodeIDs: true,
                returnPathGuides: true,
                returnRoutes: true
            });
            var analystParameter = new SuperMap.TransportationAnalystParameter({
                resultSetting: resultSetting,
                weightFieldName: "SmLength"
            });
            var findPathParameter = new SuperMap.FindPathParameters({
                isAnalyzeById: false,
                nodes: [new ol.geom.Point([55.3, 25.2]), new ol.geom.Point([55.4, 25.3])],
                hasLeastEdgeCount: false,
                parameter: analystParameter
            });

            //进行查找
            new ol.supermap.NetworkAnalystService(serviceUrl, {
                headers: {
                    "X-HW-ID": "userid",
                    "X-HW-APPKEY": "username"
                }
            }).findPath(findPathParameter, function (serviceResult) {
                var guideLayerStyle = new ol.style.Style({
                    image: new ol.style.Icon(({
                        src: '../img/walk.png',
                        size: [20, 20]
                    }))
                });
                var routeLayerStyle = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'rgba(100, 100, 225, 10)',
                        width: 3
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(0, 0, 255, 0.1)'
                    })
                });
                serviceResult.result.pathList.map(function (result) {
                    //添加分析出的路线
                    var routeSource = new ol.source.Vector({
                        features: (new ol.format.GeoJSON()).readFeatures(result.route)
                    });
                    var pathLayer = new ol.layer.Vector({
                        source: routeSource,
                        style: routeLayerStyle
                    });
                    map.addLayer(pathLayer);
                    //添加分析出的引导点
                    var guideSource = new ol.source.Vector({
                        features: (new ol.format.GeoJSON()).readFeatures(result.pathGuideItems)
                    });
                    var guideLayer = new ol.layer.Vector({
                        source: guideSource,
                        style: guideLayerStyle
                    });
                    map.addLayer(guideLayer);
                });
            });
        }

    </script>
</body>

</html>